// ------------------------ 1. 折线图 ------------------------------
const lineChart = () => {
  let myChart = echarts.init(document.querySelector("#line"));
  let option = {
    title: {
      text: "2022全学科薪资走势",
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    xAxis: {
      type: "category",
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisLabel: {
        color: "#999", // 坐标轴文字颜色
      },
      axisLine: {
        lineStyle: {
          color: "#ccc", // 轴线颜色
          type: "dashed", // 轴线类型：虚线
        },
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed", // Y轴分割线，轴线类型：虚线
        },
      },
    },
    series: [
      {
        data: [
          9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000,
          15000, 19000,
        ],
        type: "line", // 图形的类型
        smooth: true, // 平滑曲线
        lineStyle: {
          width: 6,
        },
        // 1. 使用echarts给定的基本图形，比如空心圆、实心圆、矩形......
        // symbol: 'rect',
        // 2. 可以使用图片地址
        // symbol: 'image://http://www.itcbc.com:3006/formdata/123.png',
        // 3. 可以使用base64格式的图片（百度搜索图片转base64，复制转换后的字符串）
        // symbol: 'image://.....',
        // 4. 使用 svg 格式的图片（如果有多个path，使用分号隔开）
        // symbol: 'path://M710.684108 957.19......',
        symbolSize: 10, // 拐点处图形的大小
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#499FEE", // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: "rgba(255,255,255,0.2)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(255,255,255,0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
    tooltip: {
      trigger: "axis", // 表示鼠标移入到轴的范围内就可以提示
    },
    grid: {
      top: "20%",
    },
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: "#499FEE", // 0% 处的颜色
        },
        {
          offset: 1,
          color: "#5D75F0", // 100% 处的颜色
        },
      ],
      global: false, // 缺省为 false
    },
  };
  myChart.setOption(option); // setOption第1个O是大写的
};

lineChart();

// ------------------------ 2. 饼图-右上角 ---------------------------
// 班级薪资分布
const classSalaryChart = () => {
  let myChart = echarts.init(document.querySelector("#salary"));
  let option = {
    title: {
      text: "班级薪资分布",
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "6%", // 修改图例的位置
      left: "center",
      itemWidth: 13, // 图例图形的宽度
    },
    color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],
    series: [
      {
        name: "班级薪资分布", // 修改名字
        type: "pie", // 饼图，不用改
        radius: ["50%", "64%"], // 内外圈的半径，需要改
        center: ["50%", "50%"],
        // avoidLabelOverlap: false,
        itemStyle: {
          // 每一项的样式
          borderRadius: 10, // 圆角设置
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false, // 不显示文字
          // position: 'center'
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: '40',
        //     fontWeight: 'bold'
        //   }
        // },
        // labelLine: {
        //   show: true
        // },
        data: [
          { value: 12, name: "1万以下" },
          { value: 23, name: "1-1.5万" },
          { value: 18, name: "1.5-2万" },
          { value: 10, name: "2万以上" },
        ],
      },
    ],
  };
  myChart.setOption(option);
};

classSalaryChart();

// ------------------------ 3. 饼图-左下角 ---------------------------
// 男生薪资分布 和 女生薪资分布
const sexSalaryChart = () => {
  let myChart = echarts.init(document.querySelector("#gender"));
  let option = {
    title: [
      {
        text: "男女生薪资分布",
        top: 15,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      {
        text: "男生",
        top: "45%",
        left: "45%",
        textStyle: {
          fontSize: 12,
        },
      },
      {
        text: "女生",
        top: "85%",
        left: "45%",
        textStyle: {
          fontSize: 12,
        },
      },
    ],
    tooltip: {
      trigger: "item",
    },
    color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],
    series: [
      {
        name: "男生薪资分布", // 修改名字
        type: "pie", // 饼图，不用改
        radius: ["20%", "30%"], // 内外圈的半径，需要改
        center: ["50%", "30%"], // 圆心点坐标
        data: [
          { value: 12, name: "1万以下" },
          { value: 23, name: "1-1.5万" },
          { value: 18, name: "1.5-2万" },
          { value: 10, name: "2万以上" },
        ],
      },
      {
        name: "女生薪资分布", // 修改名字
        type: "pie", // 饼图，不用改
        radius: ["20%", "30%"], // 内外圈的半径，需要改
        center: ["50%", "70%"], // 圆心点坐标
        data: [
          { value: 12, name: "1万以下" },
          { value: 23, name: "1-1.5万" },
          { value: 18, name: "1.5-2万" },
          { value: 10, name: "2万以上" },
        ],
      },
    ],
  };
  myChart.setOption(option);
};

sexSalaryChart();

// ------------------------ 4. 柱状图 -------------------------------
const groupSalaryChart = (data) => {
  let myChart = echarts.init(document.querySelector("#lines"));

  let option = {
    title: {
      text: "男女薪资",
      textStyle: {
        align: "center",
        color: "#fff",
        fontSize: 20,
      },
      top: "3%",
      left: "10%",
    },
    backgroundColor: "#0f375f",
    grid: {
      top: "25%",
      bottom: "10%", //也可设置left和right设置距离来控制图表的大小
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        label: {
          show: true,
        },
      },
    },
    legend: {
      data: ["薪资男", "薪资女"],
      top: "15%",
      textStyle: {
        color: "#ffffff",
      },
    },
    xAxis: {
      data: ["1000", "2000", "3000", "4000", "5000", "6000", "7000", "8000"],
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: "#01FCE3",
        },
      },
      axisTick: {
        show: true, //隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ebf8ac", //X轴文字颜色
        },
      },
    },
    yAxis: [
      {
        type: "value",
        name: "薪资",
        nameTextStyle: {
          color: "#ebf8ac",
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#FFFFFF",
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ebf8ac",
          },
        },
      },
      {
        type: "value",
        name: "同比",
        nameTextStyle: {
          color: "#ebf8ac",
        },
        position: "right",
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          formatter: "{value} %", //右侧Y轴文字显示
          textStyle: {
            color: "#ebf8ac",
          },
        },
      },
      {
        type: "value",
        gridIndex: 0,
        min: 50,
        max: 100,
        splitNumber: 8,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
          },
        },
      },
    ],
    series: [
      {
        name: "薪资男",
        type: "bar",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        smooth: true, //平滑曲线显示
        showAllSymbol: true, //显示所有图形。
        symbol: "circle", //标记的图形为实心圆
        symbolSize: 10, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: "#058cff",
        },
        lineStyle: {
          color: "#058cff",
        },
        areaStyle: {
          color: "rgba(5,140,255, 0.2)",
        },
        data: [3.2, 2.8, 5.8, 6.5, 2.9, 9.8, 5, 5],
      },
      {
        name: "薪资女",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#00FFE3",
              },
              {
                offset: 1,
                color: "#4693EC",
              },
            ]),
          },
        },
        data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
      },
    ],
  };

  myChart.setOption(option);
};
groupSalaryChart();
// ------------------------ 5. 地图 --------------------------------
const mapChart = () => {
  const mapData = [
    // 数据的 name 必须要和 地图的名字一致
    { name: "南海诸岛", value: 0 },
    { name: "北京", value: 3 },
    { name: "天津", value: 2 },
    { name: "上海", value: 4 },
    { name: "重庆", value: 1 },
    { name: "河北", value: 20 },
    { name: "河南", value: 23 },
    { name: "云南", value: 0 },
    { name: "辽宁", value: 15 },
    { name: "黑龙江", value: 12 },
    { name: "湖南", value: 2 },
    { name: "安徽", value: 5 },
    { name: "山东", value: 18 },
    { name: "新疆", value: 0 },
    { name: "江苏", value: 5 },
    { name: "浙江", value: 1 },
    { name: "江西", value: 4 },
    { name: "湖北", value: 3 },
    { name: "广西", value: 2 },
    { name: "甘肃", value: 9 },
    { name: "山西", value: 11 },
    { name: "内蒙古", value: 14 },
    { name: "陕西", value: 14 },
    { name: "吉林", value: 10 },
    { name: "福建", value: 0 },
    { name: "贵州", value: 0 },
    { name: "广东", value: 0 },
    { name: "青海", value: 3 },
    { name: "西藏", value: 0 },
    { name: "四川", value: 1 },
    { name: "宁夏", value: 1 },
    { name: "海南", value: 0 },
    { name: "台湾", value: 0 },
    { name: "香港", value: 0 },
    { name: "澳门", value: 0 },
  ];
  let myChart = echarts.init(document.querySelector("#map"));
  let option = {
    title: {
      text: "籍贯分布",
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    // 做一个图的时候，有标题title、图例legend、提示框tooltip、x轴、y轴、网格grid、系列数据series、颜色，必不可少的是？
    series: [
      {
        name: "籍贯分布",
        data: mapData,
        type: "map", // line折线图； pie饼图；bar柱状图; map地图
        // map: '河北', // 表示做河北地图（做什么地图，必须引入对应的地图文件才行）
        // 地图文件去下载的压缩包 （test > data > map > js）
        map: "china", // 表示做中国地图（做什么地图，必须引入对应的地图文件才行）
        label: {
          show: true, // 显示每个省的名字
          fontSize: 10,
          color: "rgba(0,0,0,0.7)",
        },
        itemStyle: {
          // 每个省的默认样式
          areaColor: "#E0FFFF",
          borderColor: "rgba(0, 0, 0, 0.2)", // 边框线，省界线
        },
        emphasis: {
          // 鼠标移入每个省，变化成什么样式
          itemStyle: {
            areaColor: "#34D39A",
            borderWidth: 0,
            shadowBlur: 20,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
    // 视觉映射组件
    visualMap: {
      type: "continuous", // 连续型
      min: 0,
      max: 20,
      inRange: {
        color: ["#fff", "#0075F0"],
      },
      text: [20, 0],
      left: 40,
      bottom: 20,
    },
    // 提示框组件
    tooltip: {
      // 自定义提示的格式: {a}表示series中的name   {b}表示各省的名字   {c}表示各省的数据
      formatter: "{b}：{c}位学员", // 河北：15位学员
      textStyle: {
        color: "#fff",
      },
      borderColor: "transparent", // 边框透明
      backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
  };
  myChart.setOption(option);
};

mapChart();
